@import '@devui/theme/styles-var/devui-var.scss';

.#{$devui-prefix}-popover__content.#{$devui-prefix}-flexible-overlay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  white-space: nowrap;
  padding: 4px 12px;
  line-height: 1.5;
  border-radius: $devui-border-radius-feedback;
  color: $devui-feedback-overlay-text;
  background-color: $devui-feedback-overlay-bg;
  font-size: $devui-font-size-sm;

  &.is-icon {
    flex-wrap: nowrap;
  }
}

.#{$devui-prefix}-popover--fade {
  &-bottom,
  &-top {
    &-enter-from,
    &-leave-to {
      opacity: 0.8;
      transform: scaleY(0.8);
    }

    &-enter-to,
    &-leave-from {
      opacity: 1;
      transform: scaleY(1);
    }

    &-enter-active {
      transition: transform 0.1s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.1s cubic-bezier(0.16, 0.75, 0.5, 1);
    }

    &-leave-active {
      transition: transform 0.1s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.1s cubic-bezier(0.5, 0, 0.84, 0.25);
    }
  }

  &-left,
  &-right {
    &-enter-from,
    &-leave-to {
      opacity: 0.8;
      transform: scaleX(0.8);
    }

    &-enter-to,
    &-leave-from {
      opacity: 1;
      transform: scaleX(1);
    }

    &-enter-active {
      transition: transform 0.1s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.1s cubic-bezier(0.16, 0.75, 0.5, 1);
    }

    &-leave-active {
      transition: transform 0.1s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.1s cubic-bezier(0.5, 0, 0.84, 0.25);
    }
  }
}
